import { Component } from "react";
import { iGoodsType, iProductType, iSwiperType } from "./models/productType";
import TabBar from "./tabBar";
import { proApi, swiperApi } from "./api/productApi";

interface iState {
  proList: iGoodsType[];
  swiperList: iSwiperType[];
}

export default class App extends Component {
  render(): React.ReactNode {
    return (
      <>
        <div className="App">
          <Header></Header>
          <Main></Main>
          <TabBar></TabBar>
        </div>
      </>
    );
  }
}

//头部
function Header() {
  return (
    <>
      <header>首页</header>
    </>
  );
}

//主体
class Main extends Component {
  state: iState = {
    proList: [],
    swiperList: [],
  };
  async componentDidMount() {
    const res = await proApi();
    const res1 = await swiperApi();
    const myData: iProductType<iGoodsType[]> = res.data;
    const myData1: iProductType<iSwiperType[]> = res1.data;
    this.setState({
      proList: myData.data,
      swiperList: myData1.data,
    });
  }
  render(): React.ReactNode {
    const proList = this.state.proList;
    const swiperList = this.state.swiperList;

    if (!proList.length) return <main>暂无数据</main>;
    return (
      <>
        <main>
          {/* 轮播图 */}
          <div className="swiper">
            {swiperList.map((item: iSwiperType, index) => {
              return <img key={index} src={item.img} alt={item.alt}/>;
            })}
          </div>

          {/* 商品列表 */}
          {proList.map((item: iGoodsType, index) => {
            return (
              <div className="listItem" key={index + 1111}>
                <img src={item.img1} alt="" />
                <div className="right">
                  <p className="name">{item.proname}</p>
                  <span className="price">
                    ￥{((item.originprice * item.discount) / 10).toFixed(0)}
                  </span>
                </div>
              </div>
            );
          })}
        </main>
      </>
    );
  }
}
